<template>
	<view>
		<nav-bar title="使用优惠劵" bgColor="#f5f5f5"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
            <view class="">
                <view class="use_coupon_item active" v-if="couponList.length > 0" @click="onSelectCoupon({canUse:true})">
                    <view class="title">不使用优惠券</view>
                    <view class="select" :class="{'active':!checkedCouponData.objId}"></view>
                </view>
                <view class="use_coupon_item" v-for="(item,index) of couponList" :key="index" :class="{'active':item.canUse}" @click="onSelectCoupon(item)">
                    <view class="price_info">
                        <view>
                            ￥
                            <text>{{item.priceDiscount}}</text>
                        </view>
                        <text>{{item.subtitle}}</text>
                    </view>
                    <view class="name_info">
                        <text>{{item.title}}</text>
                        <view>有效期限：{{item.effectiveDateStr || '长期有效'}}</view>
                    </view>
                    <view class="select" v-if="item.canUse" :class="{'active':checkedCouponData.objId == item.objId}"></view>
                    <view v-else class="station"></view>
                </view>
            </view>
        </mescroll-body>
		<!-- <view class="coupon_button_box">
			<view>已选择一张，可抵扣<text>￥50</text></view>
			<button>确认使用</button>
		</view> -->
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				shopId:"",
				goodsPrice:"",
				type:"",
				couponList:[],
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
			}
		}, 
		computed: {
			...mapState(['preOrderData', 'checkedCouponData'])
		},
		//第一次加载
		onLoad(e) {
			if(e.shopId){
				this.shopId = e.shopId;
			}
			if(e.goodsPrice){
				this.goodsPrice = e.goodsPrice;
			}
			if(e.type){
				this.type = e.type;
			}
		},
		methods: {
			...mapMutations(['setCheckedCouponData']),
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
            /*下拉刷新的回调 */
            downCallback() {
            	//联网加载数据
            	this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
            	//联网加载数据
            	this.loadData(page.num);
            },
            loadData(pageNo) {
                let httpData = {
                    pageNo: pageNo,
                    pageSize: 15
                };
                if(this.shopId){
                	httpData.shopId = this.shopId;
                }
                if(this.goodsPrice){
                	httpData.goodsPrice = this.goodsPrice;
                }
				if(this.preOrderData.goods){
					let goodsIds = [];
					this.preOrderData.goods.forEach(item => {
						goodsIds.push(item.goodsId);
					});
					httpData.goodsIds = goodsIds;
				}
                if(this.type){
                	httpData.useType = this.type;
                }
                this.$http
                	.post('api/mime/v1/discount_voucher_list', httpData,{
                		load:false
                	}).then(res => {
                		uni.stopPullDownRefresh();
                		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
                		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
                		
                		if (pageNo == 1) {
                			this.couponList = res.data;
                		} else {
                			this.couponList = this.couponList.concat(res.data);
                		}
                	}).catch(() => {
                		//联网失败, 结束加载
                		this.mescroll.endErr();
                	});
            },
			onSelectCoupon(item){
				if(item.canUse){
					this.setCheckedCouponData(item);
					uni.navigateBack();
				}else{
					uni.showToast({
						title:"当前优惠券不可用",
						icon:"none"
					});
				}
			}
		},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	}
</script>

<style lang="scss">
@import '@/style/mixin.scss';
.use_coupon_item {
	padding: 40rpx 30rpx 40rpx 45rpx;
	background: #fff3db;
	border-radius: 8rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 10rpx 30rpx;
	&.active {
		.price_info,.name_info {
			opacity: 1;
		}
	}
	.title {
		font-size: 32rpx;
		color: #cb962c;
		font-weight: bold;
	}
	.price_info {
		display: flex;
		flex-direction: column;
		align-items: center;
		opacity: 0.5;
		> view {
			font-size: 28rpx;
			color: #cb962c;
			> text {
				font-size: 60rpx;
			}
		}
		> text {
			font-size: 24rpx;
			color: #cb962c;
		}
	}
	.name_info {
		display: flex;
		flex-direction: column;
		margin: 0rpx 30rpx 0rpx 60rpx;
		opacity: 0.5;
		> text {
			font-size: 32rpx;
			color: #cb962c;
			margin-bottom: 20rpx;
		}
		> view {
			font-size: 24rpx;
			color: #cb962c;
		}
	}
	.select {
		@include theme("unselected_img","../../");
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		width: 36rpx;
		height: 36rpx;
		margin-left: 30rpx;
		&.active {
			@include theme("check_img","../../");
		}
	}
	.station {
		width: 36rpx;
		height: 36rpx;
	}
}
.coupon_button_box{
	width:100%;
	height: 98rpx;
	position: fixed;
	bottom: 0;
	background: #FFFFFF;
	border: solid 1rpx #f7f7f7;
	display: flex;
	justify-content: space-between;
	align-items: center;
	>view{
		margin-left: 30rpx;
		font-size: 24rpx;
		color: #999999;
		>text{
			font-size: 28rpx;
			color: #ff5554;
			margin-left: 20rpx;
		}
	}
	>button{
		width: 280rpx;
		height: 100%;
		font-size: 32rpx;
		color: #FFFFFF;
		@include theme('gradient_bg')
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 0rpx;
	}
}
</style>
